<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 40px">
        <div style="border-bottom: 1px solid #000000;padding-bottom: 10px">用户信息设置</div>
        <div style="margin-top: 20px;display: flex;justify-content: center">
          <div style="width: 50%">
            <div style="display: flex;justify-content: center">
              <el-form :model="formData" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="formData.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="formData.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="生日" prop="birthday">
                  <div class="block">
                    <el-date-picker
                        v-model="formData.birthday"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div style="display: flex;justify-content: center">
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save ">确 定</el-button>
                <el-button @click="fromVisible = false">取 消</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "userInformation",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      fromVisible: false,
      formData: {
        username: "",
        name: "",
        gender: "",
        birthday: '',
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
          ],
          gender: [
            {required: true, message: '请选择性别', trigger: 'change'},
          ],
          birthday: [
            {required: true, message: '请选择生日', trigger: 'change'},
          ],
        }
      },
    }
  },
  computed: {
    formattedBirthday() {
      const date = new Date(this.formData.birthday);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
  methods: {
    save() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$request.post('/user_info_update/', {
            "user_id": this.user.id,
            "name": this.formData.name,
            "gender": this.formData.gender,
            "birthday": this.formattedBirthday,
          }).then(res => {
            if (res.code === '200') {
              this.$message.success('提交成功')
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)
              this.fromVisible = false
            }
          })
        }
      })
    },
    load() {
      this.$request.post('/user_info_list/' + this.user.id + "/").then(res => {
        if (res.code === '200') {
          this.formData = res.data
          console.log(this.formData)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created() {
    this.load()
  }
}
</script>
<style scoped>

</style>